<template>
  <el-card>
    <div class="keep">
      <h5>店铺管理</h5>
      <el-button class="keep-btn" type="primary" plain @click="keepBtn"
        >保存</el-button
      >
    </div>
    <p style="display: flex">
      <span>店铺名称</span>
      <el-input
        v-model="datas.name"
        style="width: 280px; height: 20px"
      ></el-input>
    </p>
    <p style="display: flex">
      <span>店铺公告</span>
      <el-input
        type="textarea"
        :rows="2"
        style="width: 400px; height: 90px"
        v-model="datas.bulletin"
      >
      </el-input>
    </p>
    <p style="display: flex; height: 160px; margin-bottom: 0">
      <span>店铺头像</span>
      <el-upload
        class="avatar-uploader"
        action="http://127.0.0.1:5000/shop/upload"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
      >
        <img v-if="datas.avatar" :src="datas.avatar" class="avatar" />
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
    </p>
    <p style="display: flex" class="phont">
      <span>店铺图片</span>
      <el-upload
        action="http://127.0.0.1:5000/shop/upload"
        list-type="picture-card"
        :file-list="fileList"
        :on-success="picsuccess"
        :on-remove="handleRemove"
      >
        <i class="el-icon-plus"></i>
      </el-upload>
      <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt="" />
      </el-dialog>
    </p>

    <p style="display: flex; padding: 0 0 0 12px">
      <span>配送费</span>
      <el-input
        v-model="datas.deliveryPrice"
        style="width: 280px; height: 20px"
      ></el-input>
    </p>
    <p style="display: flex">
      <span>配送时间</span>
      <el-input
        v-model="datas.deliveryTime"
        style="width: 280px; height: 20px"
      ></el-input>
    </p>
    <p style="display: flex">
      <span>配送描述</span>
      <el-input
        v-model="datas.description"
        style="width: 280px; height: 20px"
      ></el-input>
    </p>
    <p style="display: flex">
      <span>店铺评分</span>
      <el-input
        disabled
        v-model="datas.score"
        style="width: 280px; height: 20px"
      ></el-input>
    </p>
    <p style="display: flex; padding: 0 0 0 28px">
      <span>销量</span>
      <el-input
        disabled
        v-model="datas.sellCount"
        style="width: 280px; height: 20px"
      ></el-input>
    </p>

    <p style="display: flex" class="activity">
      <span>添加活动</span>
      <el-input v-model="input" style="width: 280px; height: 20px"></el-input>
      <el-button
        type="primary"
        @click="cjskk"
        style="width: 60px; height: 40px; margin: 5px 0 0 10px"
        >添加</el-button
      >
    </p>
    <p style="display: flex">
      <span>参与活动</span>
      <el-checkbox-group v-model="checkList">
        <el-checkbox
          v-for="e in datas.supports"
          :key="e"
          :label="e"
        ></el-checkbox>
      </el-checkbox-group>
    </p>

    <p style="display: flex; margin: 30px 30px">
      <span>营业时间</span>
      <el-time-picker
        is-range
        value-format="yyyy-MM-dd HH:mm:ss"
        v-model="datas.date"
        range-separator="至"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        placeholder="选择时间范围"
      >
      </el-time-picker>
    </p>
  </el-card>
</template>

<script>
import { info, shopedit } from "@/apis/shop";
export default {
  data() {
    return {
      fileList: [], //照片墙数组
      business: "",
      checkList: [],
      distribution: "",
      datas: {},
      dialogImageUrl: "",
      dialogVisible: false,
      squareUrl: "",
      value1: "",
      checked: false,
      imageUrl: "",
      input: "",
      nwelis: [],
    };
  },
  methods: {
    cjskk() {
      this.datas.supports.push(this.input);
      this.input = "";
    },
    load() {
      info().then((res) => {
        this.nwelis = [];
        this.datas = res.data.data;
        // 图片没改变时拿老图片的地址
        this.neimg = this.datas.avatar.substring(
          this.datas.avatar.lastIndexOf("/") + 1
        );
        // 遍历图片数组 回填给照片墙
        this.fileList = this.datas.pics.map((psc) => {
          // 把名字添加到新的大数组中
          this.nwelis.push(psc.substring(psc.lastIndexOf("/") + 1));
          return {
            name: psc.substring(psc.lastIndexOf("/") + 1),
            url: psc,
          };
        });
        console.log(this.datas);
      });
    },
    picsuccess(res) {
      console.log(res);
      this.nwelis.push(res.imgUrl);
      console.log(this.nwelis);
    },
    // 监听照片墙删除事件
    handleRemove(file) {
      console.log(file);
      // 因为新的图片名字在file.response.imgUrl老的在file.name
      let pname = file.response ? file.response.imgUrl : file.name;
      for (let i = 0; i < this.nwelis.length; i++) {
        if (this.nwelis[i] == pname) {
          this.nwelis.splice(i, 1);
          break;
        }
      }
      console.log(this.nwelis);
    },
    // 上传成功保存图片

    handleAvatarSuccess(res, file) {
      // console.log(res);
      this.neimg = res.imgUrl;
      this.datas.avatar = URL.createObjectURL(file.raw);
    },
    keepBtn() {
      let sc = {
        id: this.datas.id,
        name: this.datas.name,
        bulletin: this.datas.bulletin,
        avatar: this.neimg, //头像
        deliveryPrice: this.datas.deliveryPrice,
        deliveryTime: this.datas.deliveryTime,
        description: this.datas.description,
        score: this.datas.score,
        sellCount: this.datas.sellCount,
        supports: JSON.stringify(this.checkList), //活动选择
        date: JSON.stringify(this.datas.date), //时间
        pics: JSON.stringify(this.nwelis), //照片墙
      };
      shopedit(sc).then((res) => {
        console.log(res);
        this.load();
      });
      console.log(sc);
    },
  },

  created() {
    this.load();
  },
};
</script>

<style lang="less" scoped>
.avatar-uploader,
.el-upload {
  height: 148px;
  width: 148px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  height: 148px;
  width: 148px;
  line-height: 148px;
  text-align: center;
}
.avatar {
  width: 100%;
  height: 100%;
  display: block;
}
.el-card {
  background-color: #fff;
}
.keep {
  align-items: center;
  padding: 0 20px;
  line-height: 40px;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid rgb(240, 238, 238);
  h5 {
    font-weight: normal;
  }
  button {
    color: #fff;
    border: 0;
    border-radius: 2px;
    background-color: rgb(105, 117, 226);
  }
}
p {
  align-content: flex-end;
  width: 500px;
  line-height: 50px;
  height: 50px;
  margin-top: 20px;
  margin-left: 34px;
  span {
    color: #606266;
    font-size: 15px;
    padding-right: 20px;
    span {
      display: blocks;
      margin-top: 10px;
    }
  }
}
.phont {
  display: flex;
  // flex-wrap: wrap;
  margin: 0 0 0 34px;
  height: 360px;
  width: 600px;
  span {
    width: 100px;
    padding: 0;
  }
}

.keep-btn {
  font-size: 14px;
  width: 60px;
  height: 30px;
  text-align: center;
  line-height: 10px;
}
.avatar-uploader,
.el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader:hover {
  border-color: #409eff;
}

.avatar {
  border: 1px dashed #d9d9d9;
  width: 178px;
  height: 178px;
  display: block;
}
.on {
  margin-left: 15px;
}
</style>